<template>
	<div class="notice-details">
		<div class="crumb-content">
			<cmp-crumb :list="crumb"></cmp-crumb>
		</div>
		<div class="details">
			<div class="notice-d">
				<div class="details-title">{{details.articleTitle}}</div>
				<div class="details-types">
					<div class="item-type">
						<i class="label-icon"></i>
						<span>{{details.tagName || 100}}</span>
					</div>
					<div class="item-type">
						<i class="view-icon"></i>
						<span>{{details.articleHit || 100}}</span>
					</div>
					<div class="item-type">
						发布时间：{{details.pubDate}}
					</div>
				</div>
				<div class="details-cont ql-editor" v-html="details.content">

				</div>
			</div>
			<div class="top">
				<div class="top-label">热门{{type == 2486 ? '新闻': '公告'}}</div>
				<div class="top-list" v-if="topList.length != 0">
					<div class="top-item" v-for="item in topList">
						<div class="top-title">{{item.articleTitle}}</div>
						<div class="item-types">
							<div class="item-type">
								<i class="label-icon"></i>
								<span>{{item.tagName}}</span>
							</div>
							<div class="item-type">
								<i class="view-icon"></i>
								<span>{{item.articleHit}}</span>
							</div>
						</div>
					</div>
				</div>
				<div class="top-list" v-else>
					<el-empty :description="'暂无热门' + (type == 2486 ? '新闻': '公告')"></el-empty>
				</div>

			</div>
		</div>
	</div>
</template>

<script>
	import cmpCrumb from '@/components/cmp-crumb'
	import {
		getArticleListApi,
		getArticleDetailsApi
	} from '@/api/Article'
	export default {
		data() {
			return {
				id: this.$route.query.id,
				type: this.$route.query.type,
				crumb: [],
				details: {},
				topList: []
			}
		},
		created() {
			if (this.type == 2356) {
				this.crumb = [{
					title: '主页',
					url: '/'
				}, {
					title: '大赛公告',
					url: '/ArticleList?id=2356'
				}, {
					title: '大赛公告详情'
				}]
			} else if (this.type == 2357) {
				this.crumb = [{
					title: '主页',
					url: '/'
				}, {
					title: '大赛风采',
					url: '/ArticleList?id=2357'
				}, {
					title: '大赛风采详情',
					url: ''
				}]
			}
			this.getDetails()
			this.getTop()
		},
		methods: {
			getDetails() {
				getArticleDetailsApi({
					articleId: this.id
				}).then(res => {
					if (res.code == 200) {
						this.details = res.data
					}
				})
			},
			getTop() {
				getArticleListApi({
					menuid: this.type,
					tagId: '',
					pageNum: 1,
					pageSize: 5,
					orderby: '热门'
				}).then(res => {
					this.topList = res.rows
				})


			},
		},
		watch: {
			$route(to, from) {
				this.crumbs = [{
					path: '/',
					name: '首页'
				}]
				this.menuid = to.query.id
				if (to.query.type == 2356) {
					this.crumb = [{
						title: '主页',
						url: '/'
					}, {
						title: '大赛公告',
						url: '/ArticleList?id=2356'
					}, {
						title: '大赛公告详情'
					}]
				} else if (to.query.type == 2357) {
					this.crumb = [{
						title: '主页',
						url: '/'
					}, {
						title: '大赛风采',
						url: '/ArticleList?id=2357'
					}, {
						title: '大赛风采详情',
						url: ''
					}]
				}
			}
		},
		components: {
			cmpCrumb
		}
	}
</script>

<style lang="less">
	@contWidth: 1280px;

	.notice-details {
		background-color: #f7f7f7;
		min-height: calc(100vh - 120px);

		.crumb-content {
			margin-bottom: 16px;
		}

		.details {
			width: @contWidth;
			margin: 0 auto;
			display: flex;
		}

		.notice-d {
			width: 964px;
			background-color: #fff;
			padding: 42px 60px 40px;
		}

		.details-title {
			font-size: 30px;
			font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
			font-weight: 500;
			color: #333333;
			line-height: 42px;
			text-align: center;
			margin: 0 auto 23px;
			width: 700px;
		}

		.details-types {
			display: flex;
			justify-content: center;
			align-items: center;
			padding-bottom: 30px;
			border-bottom: 1px solid #ddd;
			margin-bottom: 41px;
		}

		.top {
			width: 300px;
			margin-left: 16px;
			padding: 0 22px;
			background-color: #fff;
		}

		.top-label {
			font-size: 14px;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			color: #333333;
			line-height: 60px;
		}

		.top-item {
			padding-bottom: 16px;
			margin-bottom: 16px;
			border-bottom: 1px solid #eee;
			cursor: pointer;
		}

		.top-title {
			font-size: 16px;
			font-family: PingFangSC, PingFang SC;
			font-weight: 500;
			color: #333333;
			line-height: 22px;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 2;
			overflow: hidden;
			margin-bottom: 16px;
		}

		.top-types {
			height: 46px;
			width: 100%;
			display: flex;
			align-items: center;
			font-size: 12px;
			font-family: PingFangSC, PingFang SC;
			font-weight: 500;
			color: #999999;
		}

		.item-types {
			display: flex;
		}

		.item-type {
			margin-right: 32px;
			display: flex;
			align-items: center;
			font-size: 12px;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			color: #999999;
			line-height: 17px;
		}

		.label-icon {
			display: block;
			width: 16px;
			height: 16px;
			background: url(../assets/img/type_icon.png)no-repeat;
			background-size: 100% 100%;
			margin-right: 6px;
		}

		.view-icon {
			display: block;
			width: 16px;
			height: 16px;
			background: url(../assets/img/view_icon.png)no-repeat;
			background-size: 100% 100%;
			margin-right: 6px;
		}
	}
</style>